<template>
	<view class="content">
		<view class="header">
			<view class="top-nav">
				<view class="ico-return">
					<uni-icons color="#999999" size="22" type="back"></uni-icons>
				</view>
				<view class="text">
					<view class="title">讲堂</view>
				</view>
				<view class="share">
					<view class="img-share"></view>
				</view>
			</view>
		</view>
		<view class="cover">
			<view class="cover-img">	
			</view>
		</view>
		<view class="nav">
			<view class="tabs">
				<liuyuno-tabs
					:tabData="['讲堂介绍', '讲堂目录', '评价列表']"
				/>
			</view>
		</view>
		<view class="lecture-introduce">
			<view class="introduce-header">
				<view class="solved-problem">
					{{problem}}
				</view>
				<view class="price">
					￥{{price}}
				</view>
				<view class="number-participant">
					{{participant}}人参与
				</view>
			</view>
			<view class="introduce-text">
				<view class="explanatory">
					<view class="">
						【适合人群】
						<view>
							<ul>
								<li>长期被口腔溃疡困扰的人</li>
								<li>想要摆脱口腔溃疡的人</li>
							</ul>
						</view>
						【医生寄语】
						<view>
							<ul>
								<li>
									我们平时提到的口腔溃疡医学上叫「复发性口腔溃疡」，是一类最常见的口腔黏膜病。
									有报道说，有接近20%的人都经历过口腔溃疡的困扰，不论年龄、性别、种族，都可能发生口腔溃疡。
								</li>
								<li>
									如果某一天你看到一个朋友眉头紧锁，沉默寡言，一脸不爽，茶饭不思，
									在怀疑他失恋的抑郁之前，你或许还可以问一问他是不是得了口腔溃疡。
								</li>
								<li>如果你想了解导致口腔溃疡的真凶是什么？又该如何摆脱口腔溃疡呢？</li>
								<li>跟我一起进入这节课吧！</li>
							</ul>
						</view>
						<br>
						【听课说明】
						<view>
							<ul><li></li></ul>
						</view>
						【如何听课】
						<view>
							<ul>
								<li>点击底部 「立即购买」-确认支付-点击「每小节的标题」</li>
								<li>即可收听课程。</li>
							</ul>
						</view>
					</view>
				</view>
			</view>
			<view class="introduce-bottom">
				<view class="doctor-img"></view>
				<view class="doctor-info">
					主讲师：何剑亮 医师
					<br>
					<span>浙江大学医学院附属第二医院  口腔科</span>
				</view>
				<view class="doctor-attention">
					+关注
				</view>
				<view class="doctor-msg">
					上海交通大学硕士，丁香医生科普作者。擅长补牙、牙周病、智齿、口
					腔溃疡、口臭、牙齿美白、烤瓷牙、种植牙等口腔问题的咨询。
				</view>
			</view>
		</view>
		<view class="buy">
			<view class="bottom-btn">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import liuyunoTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";	
	export default {
		comments:{
			uniIcons,
			liuyunoTabs
		},
		data() {
			return {
				problem: "口腔溃疡总反复？口腔科医生来帮你",
				price: "1.00",
				participant: 1196
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.content{
		background-color: #faf8f8;
	}
	ul{
		list-style: none;
		padding: 0;
	}
	.header{
		height: 50px;
		width: 100%;
		line-height: 50px;
	}
	.buy{
		height: 50px;
		width: 100%;
		line-height: 50px;
	}
	.top-nav{
		padding: 0 15px;
		display: flex;
		justify-content: space-between;
	    position: fixed;
	    width: 100%;
	    background-color: white;	
	}
	.bottom-btn{
		position: fixed;
		width: 100%;
		background-color: #00baad;
		color: white;
		text-align: center;
		bottom: 0;
	}
	.ico-return{
		display: inline-block;
	}
	.title{
		font-size: 15px;
		color: #383838;
		font-weight: 600;
	}
	.share{
		display: flex;
		align-items: center;
	}
	.img-share{
		width: 22px;
		height: 22px;
		background: url(../../static/img/physician-lecture/share.png) no-repeat;
		background-size: 100%;
	}
	.cover{
		width: 100%;
		height: 223px;
	}
	.cover-img{
		width: 100%;
		height: 100%;
		background: url(../../static/img/physician-lecture/cover.jpeg) no-repeat;
		background-size: 100%;
	}
	.nav{
		border-bottom: 1px solid #e5e5e5;
		background-color: white;
	}
	.introduce-header{
		padding: 10px 20px;
		background-color: white;
		overflow: hidden;
	}
	.solved-problem{
		font-size: 17px;
		color: #505050;
	}
	.price{
		float: left;
		line-height: 40px;
		font-size: 14px;
		color: #d43030;
	}
	.number-participant{
		float: right;
		line-height: 40px;
		font-size: 10rpx;
		color: #a6a6a6;
	}
	.introduce-text{
		margin-top: 15px;
		background-color: white;
	}
	.explanatory{
		padding: 15px;
	}
	.explanatory ul li{
		padding: 3px 0px;
		font-size: 13px;
	}
	.introduce-bottom{
		margin-top: 15px;
		background-color: white;
		padding: 15px;
		display: flex;
		flex-wrap: wrap;
	}
	.doctor-img{
		width: 30px;
		height: 30px;
		background: url(../../static/img/physician-lecture/doctor.jpeg) no-repeat;
		background-size: 100%;
		border-radius: 15px;
	}
	.doctor-info{
		font-size: 10px;
		font-weight: 600;
		margin-left: 20px;
	}
	.doctor-info span{
		font-size: 8px;
		color: #808080;
		font-weight: 400;
	}
	.doctor-attention{
		margin-left: 50px;
		width: 46px;
		height: 21px;
		background-color: #f8be01;
		border-radius: 2px;
		font-size: 8px;
		color: white;
		line-height: 21px;
		text-align: center;
	}
	.doctor-msg{
		margin-top: 10px;
		font-size: 8px;
	}
</style>
